<template>
  <div>
    <h1>{{ msg }}</h1>
    <h1>{{ store.state.count }}</h1>
    <button @click="handleAddBtn">ADD</button>
    <button @click="handleInitBtn">chu shi hua</button>
  </div>
</template>

<script>
import { ref, defineComponent } from "vue";
import { useStore } from 'vuex'
export default defineComponent({
  setup() {
    const store = useStore()
    const msg = ref('hello home page')
    // const count = ref(0)
    function handleAddBtn() {
      store.commit('increment')
      // count.value = store.state.count
    }
    function handleInitBtn() {
      store.dispatch('getCount')
    }
    return {
      store, msg, handleAddBtn, handleInitBtn
    }
  },
  asyncData({store}) {
    return store.dispatch('getCount')
  }
})

</script>

<style lang="scss" scoped>
</style>